<!-- 提货点管理 -->
<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <view class="account-info">
                <view class="account-info-avatar">
                    <image class="avatar-img" mode="aspectFill" :src="easyGetUserImgUrl(userInfo.HeadPortrait)">
                    </image>
                </view>
                <view class="account-info-user">
                    <view class="name">
                        <text>{{ userInfo.NickName }}</text>
                        <!-- <text class="level">团长</text> -->
                        <text class="level">{{ userInfo.GradeName }}</text>
                    </view>
                    <view class="shop-name">{{ takeDeliveryInfo.TakeDeliveryName }}</view>
                </view>
            </view>

            <view class="capital">
                <view class="commission">
                    <view class="info">
                        <view class="name">可提现佣金</view>
                        <view class="num">{{ balance.SelfBalance }}元</view>
                    </view>
                    <!-- <view class="handle">
                <button class="btn btn-main btn-draw">提现</button>
              </view> -->
                </view>
                <view class="menu">
                    <view class="item">
                        <view class="info">
                            <text class="num">{{ taskInfo.WaitCashMoney }}</text>
                            <text class="unit">元</text>
                        </view>
                        <view class="name">收入总金额</view>
                    </view>
                    <view class="item">
                        <view class="info">
                            <text class="num">{{ taskInfo.OrderCount }}</text>
                            <text class="unit">个</text>
                        </view>
                        <view class="name">订单总数</view>
                    </view>
                    <!-- <view class="item">
                <view class="info">
                  <text class="num">6666</text>
                  <text class="unit">元</text>
                </view>
                <view class="name">团员总数</view>
              </view> -->
                </view>
            </view>

            <!-- <button class="btn btn-scan btn-main">扫一扫</button> -->
            <!-- <view class="manage">
                <view class="item" @click="goUrl('/pages_group/packet/order/receipt/index')">
                    <image src="../../static/img/communtiyGroup/icon_sh.png" class="icon-img"></image>
                    <text class="name">收货管理</text>
                </view>
                <view class="item" @click="goUrl('/pages_group/packet/order/task/index')">
                    <image src="../../static/img/communtiyGroup/icon_th.png" class="icon-img"></image>
                    <text class="name">提货管理</text>
                </view>
            </view> -->

            <view class="nav">
                <view class="title">其他功能</view>
                <view class="menu">
                    <!-- <view class="item" @click="shareOpen">
                        <image src="../../static/img/communtiyGroup/icon1.png" class="icon-img"></image>
                        <view class="item-main">
                            <text class="item-text">邀请二维码</text>
                        </view>
                    </view> -->
                    <view class="item" @click="goUrl('/pages_me/packet/finance/rebateDetailList')">
                        <image src="../../static/img/communtiyGroup/icon2.png" class="icon-img"></image>
                        <view class="item-main">
                            <text class="item-text">我的佣金</text>
                        </view>
                    </view>
                    <view class="item" @click="goUrl('/pages_group/packet/member/index')">
                        <image src="../../static/img/communtiyGroup/icon4.png" class="icon-img"></image>
                        <view class="item-main">
                            <text class="item-text">我的客户
                            </text>
                        </view>
                    </view>
                    <view class="item" @click="goUrl('/pages_group/packet/manage/address')">
                        <image src="../../static/img/communtiyGroup/icon3.png" class="icon-img"></image>
                        <view class="item-main">
                            <text class="item-text">店铺信息</text>
                        </view>
                    </view>
                    <!-- <view class="item" @click="goUrl('/pages_me/packet/finance/rewardReport')">
                        <image src="../../static/img/communtiyGroup/icon3.png" class="icon-img"></image>
                        <view class="item-main">
                            <text class="item-text">分润明细</text>
                        </view>
                    </view> -->
                </view>
            </view>
        </view>
        <uni-popup ref="shareTip" type="center" class="popAmountTip" :animation="false" :maskClick="true">
            <view class="share-box">
                <view class="name">{{ userInfo.NickName }}</view>
                <view class="qcode">
                    <view style="margin: 0 auto; width: 220px; height: 220px;">
                        <!-- <image v-if="config.domain == 'shop.huixiaoke.net'" src="/static/qrcode.png" class="qrcode-img">
                        </image>
                        <template v-else>
                            <u-qrcode ref="uqrcode" canvas-id="qr" :value="text" :size="size" @click="remake"
                                @complete="complete($event)"></u-qrcode>
                        </template> -->
                        <u-qrcode ref="uqrcode" canvas-id="qr" :start="start" :value="text" :size="size" @click="remake"
                            @complete="complete($event)"></u-qrcode>
                    </view>
                </view>
                <view class="tip">请向会员展示此二维码</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import storage from "@/uni-sub-base/utils/storage.js"
import config from "@/config/config.js"
import { getTakeDeliveryStatData } from "@/service/api/communtiyGroup.js"
import { getAccountBalance } from "@/service/api/member.js"
import { GetMyApplyTakeDelivery } from "@/service/api/takeDelivery.js"
import { getBaseUrl } from "@/utils/appUrls.js"
export default {
    name: "",
    data() {
        return {
            config: {
                title: "店铺管理",
                back: true,
                color: ["#333333"],
                centerSlot: true,
                barPlaceholder: true,
                backgroundColor: [1, "#F7F9FB"],
            },
            userInfo: {},
            taskInfo: {},
            balance: {},
            takeDeliveryInfo: {
                TakeDeliveryName: ""
            },
            start: false,
            text: '',
            size: 220
        }
    },

    components: {},

    computed: {},

    created() {
        this.getInit()
    },

    mounted() {
        let url = "https://" + config.domain + "/b2btest/#/pages/login/register?isScanCodeEnter=1&invitUserPhone=" + this.userInfo.UserName;
        // let url = "https://shopsanfengtest.hsy884.com/b2btest/#/pages/login/register?isScanCodeEnter=1&invitUserPhone=" + this.userInfo.UserName;
        this.text = url
    },

    methods: {
        getInit() {
            this.userInfo = storage.getCache("userInfo")
            getTakeDeliveryStatData({}).then((res) => {
                this.taskInfo = res.Data
            })
            getAccountBalance().then((res) => {
                if (res.State) {
                    this.balance = res.Data
                }
            })
            GetMyApplyTakeDelivery().then((res) => {
                if (res.State && res.Data) {
                    this.takeDeliveryInfo = res.Data
                }
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        shareOpen() {
            let url = "https://" + config.domain + "/b2btest/#/pages/login/register?isScanCodeEnter=1&invitUserPhone=" + this.userInfo.UserName;
            // let url = "https://shopsanfengtest.hsy884.com/b2btest/#/pages/login/register?isScanCodeEnter=1&invitUserPhone=" + this.userInfo.UserName;
            this.text = url
            console.log(url)
            this.$refs.shareTip.open()
            this.start = true
        },
        remake(e) {
            console.log(e)
        },
        complete(e) {
            console.log(e)
            // this.$refs.uqrcode.save({
            //     success: () => {
            //         uni.showToast({
            //             icon: 'success',
            //             title: '保存成功'
            //         });
            //     }
            // });
        }
    },
}
</script>
<style lang="scss" scoped>
page {
    background: #f7f9fb;
}

.main {
    padding: 24rpx;

    .account-info {
        display: flex;

        .account-info-avatar {
            margin-right: $app-page-padding;
            position: relative;

            .avatar-img {
                width: 124rpx;
                height: 124rpx;
                border: 2rpx solid rgba($color-white, 0.8);
                box-shadow: 0 3rpx 8rpx 0rpx rgba(25, 27, 34, 0.2);
                border-radius: 50%;
            }
        }

        .account-info-user {
            display: flex;
            flex-flow: column;
            justify-content: space-around;

            .name {
                font-size: 40rpx;

                .level {
                    width: 80rpx;
                    height: 36rpx;
                    padding: 6rpx 10rpx;
                    margin-left: 10rpx;
                    font-size: 24rpx;
                    color: #ffffff;
                    background: #ffca85;
                    border-radius: 20rpx 20rpx 20rpx 0rpx;
                }
            }

            .shop-name {
                font-size: 28rpx;
            }
        }
    }

    .capital {
        margin-top: 24rpx;
        background: #ffffff;
        border-radius: 20rpx;
        overflow: hidden;

        .commission {
            display: flex;
            flex-flow: row;
            height: 100rpx;
            padding: 30rpx;
            background: #182850;
            color: #ffffff;
            position: relative;

            &:before {
                content: "";
                position: absolute;
                top: 156rpx;
                left: 50%;
                margin-left: -7px;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-top: 5px solid #182850;
                width: 0;
                height: 0;
            }

            .info {
                flex: 1;

                .name {
                    font-size: 24rpx;
                    color: #ffca85;
                }

                .num {
                    font-size: 40rpx;
                }
            }

            .handle {
                display: flex;
                align-items: center;

                .btn-draw {
                    background: #ffca85;
                    color: #9a510f;
                    border-color: #ffca85;
                }
            }
        }

        .menu {
            display: flex;
            flex-wrap: wrap;
            padding: 24rpx 30rpx;
            justify-content: space-around;

            .item {
                text-align: center;

                .info {
                    .num {
                        font-size: 40rpx;
                        font-weight: bold;
                    }

                    .unit {
                        font-size: 24rpx;
                    }
                }

                .name {
                    font-size: 24rpx;
                }
            }
        }
    }

    .manage {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 24rpx;

        .item {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            height: 80px;
            background: #ffffff;
            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 12px;

            &:first-child {
                margin-right: 38rpx;
            }

            .icon-img {
                width: 80rpx;
                height: 80rpx;
                margin-right: 10rpx;
                display: block;
                margin-bottom: 12rpx;
            }

            .name {
                font-size: 36rpx;
            }
        }
    }

    .nav {
        background: #ffffff;
        margin: 24rpx 0 0 0;
        border-radius: 20rpx;

        .title {
            padding: 30rpx 20rpx;
            font-size: 14px;
        }

        .menu {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .item {
                width: 25%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: 45rpx;

                .icon-img {
                    width: 64rpx;
                    height: 64rpx;
                    display: block;
                    margin-bottom: 12rpx;
                }

                .icon {
                    height: 44rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 16rpx;

                    .icon-left {
                        display: flex;
                    }
                }

                .item-main {
                    display: flex;
                    flex: 1;
                    flex-direction: row;
                    align-items: center;

                    .item-text {
                        font-size: $font-size-24;
                        color: $color-gray-1;
                    }
                }
            }
        }
    }
}

.btn-scan {
    height: 96rpx;
    margin: 40rpx 0;
    font-size: 34rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 48rpx;
}

.share-box {
    width: 300px;
    border-radius: 40rpx;
    background: #F1270C;

    .name {
        font-size: 42rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        padding: 50rpx 0;
    }

    .qcode {
        width: 270px;
        height: 270px;
        box-sizing: border-box;
        padding-top: 25px;
        background: #ffffff;
        border-radius: 16rpx;
        margin: 0 auto;
    }

    .tip {
        font-size: 28rpx;
        color: #ffffff;
        text-align: center;
        padding: 50rpx 0;
    }
}
</style>
